html {
  font-size: 15px;
  body {
    display: grid;
    justify-content: center;
    align-content: center;
    width: 100vw;
    height: 100vh;
    nav {
      display: grid;
      grid-template-columns: repeat(5, 100px);
      justify-items: center;
      font-size: 30px;
      overflow: hidden;
      a {
        text-decoration: none;
        font-size: 2rem;
        color: #000;
        @for $i from 1 to 6 {
          &:nth-child(#{$i}).active ~ .line {
            transform: translateX(#{$i * 100 - 100}px);
          }
          &[href]:hover:nth-child(#{$i}) ~ .line {
            transform: translateX(#{$i * 100 - 100}px);
          }
        }
      }

      .line {
        height: 2px;
        width: 90px;
        transition-duration: 0.5s;
        transition-delay: 0.3s;
        transform: translateX(-100px);
        background: linear-gradient(to right, white, #1abc9c, #e74c3c, #f39c12, white);
      }
    }
  }
}
